<template>
  <div>
    <!-- 导航 -->
    <van-nav-bar fixed >
      <template #left>
        <van-icon @click="onBack" name="arrow-left" size="20px" color="gray" style="font-weight: bold;width: 20px"/>
      </template>
      <template #title>
        <span style="color: #FF8800;font-size: 18px">浏览历史</span>
      </template>
    </van-nav-bar>
    <div style="margin-top: 60px">
      <div @click="onClick(idx)" v-for="(item, idx) in list" :key="idx" style="text-align: left; padding: 0px 20px">
       <div style="margin: 10px 0">
         <div style="font-weight: bold; font-size: 18px">{{item.title}}</div>
         <div style="color: grey">{{item.time}}</div>
       </div>
        <div style="border-bottom: 1px solid #ebedf0;transform: scaleY(.5)"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ReadHistory',
  data () {
    return {
      isReaded: false,
      list: []
    }
  },
  methods: {
    onLoad () {
      this.list = this.$localStore.getReadHistory()
      console.log('this.readHistoryList', this.list)
      this.isReaded = true
    },
    onBack () {
      this.isReaded = false
      this.list = []
      this.$router.back()
    },
    onClick (idx) {
      this.$router.push({ path: '/article', query: { id: this.list[idx].id } })
    }
  },
  activated () {
    if (!this.isReaded) {
      console.log('this.isReaded', this.isReaded)
      this.onLoad()
    }
  }
}
</script>

<style scoped>

</style>
